<template>
    <div class="app-container">
        <el-card>
            <el-page-header @back="goBack">
                <template #content>
                    <div class="flex items-center">
                        <div v-if="!route.query?.id">新增车间</div>
                        <div v-else>
                            <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
                                车间编码:
                            </span>
                            <el-tag :type="form.status == 1 ? 'danger' : ''">{{ form.code }}</el-tag>
                        </div>
                    </div>
                </template>
                <template #extra>
                    <div class="flex items-center" v-if="!route.query.info">
                        <el-button type="primary" @click="submitForm">保 存</el-button>
                    </div>
                </template>
            </el-page-header>
        </el-card>
        <el-card style="margin-top: 10px;">
            <el-collapse v-model="activeNames">
                <el-collapse-item disabled  title="基本信息" name="1">
                    <template #title>
                        <el-icon style="color: #4479F6;">
                            <Position />
                        </el-icon> <span class="title">基本信息</span>
                    </template>
                    <div>
                        <el-form :model="form" :rules="rules" :disabled="flag" ref="userRef" label-width="100px">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="车间名称" prop="name">
                                        <el-input v-model="form.name" placeholder="请输入车间名称" maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="印刷种类" prop="printType">
                                        <el-select style="width:100%" v-model="form.printType" placeholder="请选择印刷种类">
                                            <el-option v-for="item in ems_workshop_print_type" :key="item.value"
                                                :value="item.value" :label="item.label">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="科目" prop="subjectType">
                                        <el-select style="width:100%" v-model="form.subjectType" multiple
                                            collapse-tags-tooltip placeholder="请选择科目">
                                            <el-option v-for="item in ems_workshop_subject_type" :key="item.value"
                                                :label="item.label" :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="负责人" prop="chargePerson">
                                        <el-input v-model="form.chargePerson" readonly @click="openDialog"
                                            placeholder="点击选择负责人" maxlength="30" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="负责人电话" prop="chargePersonTel">
                                        <el-input v-model="form.chargePersonTel" disabled placeholder="自动带出"
                                            maxlength="18" />
                                    </el-form-item>
                                </el-col>
                                <!-- <el-col :span="8">
                                    <el-form-item label="状态" prop="status">
                                        <el-select v-model="form.status" style="width:100%" placeholder="请选择状态">
                                            <el-option :value="1" label="停用"></el-option>
                                            <el-option :value="2" label="启用"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col> -->
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="备注">
                                        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </el-card>
        <el-dialog v-model="dialogVisible" title="人员列表" width="60%" @close="close">
            <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-form-item label="员工编码" prop="code">
                    <el-input v-model.trim="queryParams.code" placeholder="请输入员工编码" @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model.trim="queryParams.name" placeholder="请输入姓名" @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="loading" :data="userList" stripe border style="cursor: pointer;"
                @cell-click="handleCellClick" >
                <el-table-column label="序号" width="80" type="index" align="center" />
                <el-table-column label="员工编号" min-width="120" align="center" :show-overflow-tooltip="true" prop="code">
                </el-table-column>
                <el-table-column label="姓名" align="center" :show-overflow-tooltip="true" prop="name">
                </el-table-column>
                <el-table-column label="联系方式" align="center" :show-overflow-tooltip="true" prop="telephone">
                </el-table-column>
            </el-table>
            <div class="footer">
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getUserList" />
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import useTagsViewStore from '@/store/modules/tagsView'
import { addMesWorkShop, editMesWorkShop, getMesWorkShop } from '@/api/basicInfo/workshop'
import { ElMessage } from 'element-plus'
import { getMesUserInfo } from '@/api/basicInfo/personnel'
const tagsViewStore = useTagsViewStore()
const { proxy } = getCurrentInstance();
const { ems_workshop_print_type, ems_workshop_subject_type } = proxy.useDict("ems_workshop_print_type", "ems_workshop_subject_type");
const route = useRoute()
const router = useRouter()
const activeNames = ['1']
const userRef = ref(null)
const flag = ref(false)
const dialogVisible = ref(false)
const userList = ref([])
const loading = ref(false)
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    joinPositionStatus: 1
})
const total = ref(0)
const data = reactive({
    form: {
    },
    rules: {
        name: [{ required: true, message: "车间名称不能为空", trigger: "blur" },],
        printType: [{ required: true, message: "印刷种类不能为空", trigger: ["blur", "change"] }],
        subjectType: [{ required: true, message: "科目不能为空", trigger: ["blur"] }],
        chargePerson: [{ required: true, message: "负责人不能为空", trigger: ["change"] }],
        chargePersonTel: [{ required: true, message: "负责人电话不能为空", trigger: "blur" }],
    }
});

const { form, rules } = toRefs(data);

watch(() => route, (newValue, oldValue) => {
    if (newValue.query?.id) {
        getMesWorkShop({ id: newValue.query.id }).then(res => {
            Object.assign(form.value, { ...res.rows[0] })
            form.value.printType = form.value.printType.toString()
            form.value.subjectType = res.rows[0].subjectType.split(',')
            if (newValue.query.info) {
                flag.value = true
            }
        })
    }
}, { immediate: true });
//  返回
const goBack = () => {
    tagsViewStore.delView(route)
    router.go(-1)
}
// 选择在职人员
const openDialog = () => {
    dialogVisible.value = true
    getUserList()
}

// 选中当前行
const handleCellClick = (row) => {
    proxy.$modal.confirm('是否确认选择"' + row.name).then(function () {
        form.value.chargePerson = row.name
        form.value.chargePersonTel = row.telephone
        dialogVisible.value = false
    }).catch(() => { });
}
const getUserList = async () => {
    loading.value = true
    const res = await getMesUserInfo(queryParams.value)
    loading.value = false
    userList.value = res.rows
    total.value = res.total
}
// 搜索
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getUserList();
}
/** 重置按钮操作 */
const resetQuery = () => {
    proxy.resetForm("queryRef");
    handleQuery();
};
const close = () => {
    proxy.resetForm("queryRef");
}

// 确认
const submitForm = () => {
    userRef.value.validate(valid => {
        if (valid) {
            const subjectType = form.value.subjectType.join(',')
            if (route.query.id) {
                editMesWorkShop({ ...form.value, subjectType }).then(res => {
                    ElMessage({
                        message: '编辑成功',
                        type: 'success',
                    })
                    goBack()
                })
            } else {
                addMesWorkShop({ ...form.value, status: 2, subjectType }).then(res => {
                    ElMessage({
                        message: '新增成功',
                        type: 'success',
                    })
                    goBack()
                })
            }
        }
    });
}
</script>

<style lang="scss" scoped>
.footer {
    text-align: center;
}

:deep(.el-pagination) {
    position: unset;
}
</style>